<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <style>
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        align-content: center;
        overflow: hidden;
      }
      * {
        user-select: none;
        -webkit-user-drag: none;
      }
      .bg {
        width: 380px;
        height: 220px;
        position: relative;
        margin: auto;
        background-color: rgb(190, 157, 98, 0.95);
        border: 5px solid #a07b46;
      }
      .title {
        padding: 10px 30px;
        font-weight: bold;
        font-size: 150%;
        border-radius: 30px;
        background-color: #6d4921;
        border: 5px solid #a07b46;
        color: #e2c9ac;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -40px);
      }
      .form {
        margin-top: 50px;
      }
      .form-item {
        background-color: #a07b46;
        margin: 10px 30px;
        padding: 5px 20px;
        border: 2px solid #e2c9ac;
        display: flex;
        flex-flow: row;
        align-items: center;
      }
      #username,
      #password {
        flex: auto;
        outline: none;
        margin: 5px 0 5px 10px;
        padding: 2px 10px;
        border: 2px solid #e2c9ac;
        line-height: 20px;
        border-radius: 20px;
        background-color: #6d4921;
        color: #e2c9ac;
      }
      .options {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        padding: 0px 30px;
        font-size: 50%;
      }
      a {
        text-decoration: none;
        color: #000;
      }
      a:hover {
        text-decoration: underline;
      }
      .submit {
        display: flex;
        flex-flow: row;
        justify-content: space-evenly;
        margin-top: 10px;
      }
      .button {
        padding: 6px 20px;
        border-radius: 30px;
        cursor: pointer;
        background-color: #be9d62;
        border: 5px solid #a07b46;
      }
      .button:hover {
        background-color: #6d4921;
        color: #e2c9ac;
      }
      .close {
        position: absolute;
        top: -15px;
        right: -10px;
        width: 30px;
        height: 30px;
        padding: 0;
        text-align: center;
        align-content: center;
      }
    </style>
  </head>
  <body>
    <div class="bg" style="-webkit-app-region: drag">
      <div class="title" style="-webkit-app-region: drag">登录框</div>
      <div class="form">
        <div class="form-item" style="-webkit-app-region: no-drag">
          <label for="username">账号</label><input type="text" id="username" value="ssnangua" />
        </div>
        <div class="form-item" style="-webkit-app-region: no-drag">
          <label for="password">密码</label><input type="password" id="password" value="123456" />
        </div>
        <div class="options">
          <div style="-webkit-app-region: no-drag">
            <input type="checkbox" id="remember" /><label for="remember">记住我</label>
          </div>
          <div style="-webkit-app-region: no-drag"><a href="javascript:;">忘记密码？</a></div>
        </div>
      </div>
      <div class="submit">
        <div class="button" style="-webkit-app-region: no-drag">登录</div>
        <div class="button" style="-webkit-app-region: no-drag">注册</div>
      </div>
      <div class="button close" style="-webkit-app-region: no-drag" onclick="window.close()">X</div>
    </div>
  </body>
</html>
